<template>
  <!-- <div class="app-container" :class=$.role_setting_panel> -->
  <el-container direction="vertical">
    <el-header style="height: auto">
      <el-form
        ref="form"
        label-width="100px"
        style="margin-top: 20px;"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="三查表名称：">
              <el-input v-model="search.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="10px">
              <el-button @click="getThreeTableGroup(search.name)">查询</el-button>
              <!-- <el-button
                class="filter-item"
                type="primary"
                @click="exportTable "
              >导出</el-button>-->
              <el-button
                type="warning"
                @click="showThreeTable"
              >设置三查表</el-button>
            </el-form-item>
            <el-dialog
              :title="title"
              :visible.sync="dialogFormVisible"
            >
              <el-form
                ref="setTCForm"
                :model="threeTableForm"
                class="demo-ruleForm"
                label-position="left"
                label-width="100px"
                style="margin-left:20px;"
              >
                <el-row class="firstform">
                  <el-col :span="14">
                    <el-form-item
                      label="三查表名称："
                      prop="threename"
                      :rules="{required: true, message:'请输入三查表名称', trigger: 'blur'}"
                    >
                      <el-input
                        v-model="threeTableForm.threename"
                        placeholder="请输入三查表名称"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item
                      label="三查表类型："
                      prop="tabletype"
                      :rules="[{required:true,message:'请选择三查表类型',trigger:'change'}]"
                    >
                      <el-select
                        v-model="threeTableForm.tabletype"
                        @change="onTableTypeChange"
                      >
                        <el-option
                          label="内部"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="外部"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item
                      label="业务类型："
                      :rules="[{required:true,message:'请选择业务类型',trigger:'change'}]"
                      prop="selftype"
                    >
                      <el-select v-model="threeTableForm.selftype">
                        <el-option
                          v-for="item in serviceports"
                          :label="item.serviceport"
                          :value="item.id"
                          :key="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item
                      label="开始日期："
                      prop="starttime"
                      :rules="{required: true, message:'请选择开始日期', trigger: 'blur'}"
                    >
                      <el-date-picker
                        v-model="threeTableForm.starttime"
                        type="date"
                        placeholder="开始时间"
                        style="width:100%"
                        format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item
                      label="检查部门："
                      prop="department"
                      :rules="{required: true, message:'请选择部门名称', trigger: 'blur'}"
                    >
                      <el-select
                        v-model="threeTableForm.department"
                        placeholder="请输入部门名称"
                        multiple
                        clearable
                      >
                        <el-option
                          v-for="depart in department"
                          :key="depart.id"
                          :value="depart.id"
                          :label="depart.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      label="自检周期："
                      prop="period"
                      :rules="{required: true, message:'请输入自检周期', trigger: 'blur'}"
                    >
                      <el-input-number
                        :min="1"
                        v-model="threeTableForm.period"
                        placeholder="请输入自检周期"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label=" "
                      prop="threeItem"
                      :rules="[{required:true,message:'请添加内容',trigger:'change'}]"
                    >
                      <el-select
                        v-model="newlyValue"
                        @change="handleNewlyChange"
                        placeholder="新增检查内容"
                      >
                        <el-option
                          v-for="item in addOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="20px">
                      <el-button
                        type="primary"
                        @click="addNewValue"
                        :disabled="!newlyValue"
                      >新增</el-button>
                      <el-button
                        type="info"
                        @click="clearNewlyConfig"
                      >清空</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row>
                  <el-form-item label=" ">
                    <el-button type="primary">新增检查内容<i class="el-icon-arrow-down el-icon--right" style="margin-left: 16px"></i></el-button>
                  </el-form-item>
                </el-row>-->
                <el-row
                  v-for="(item,index) in newlyValueConfig"
                  :key="index"
                  class="newly-add"
                >
                  <el-col style="width: 100px ; height: 44px;">
                    <!-- <div v-if="item.type!==1">
                      <el-radio
                        v-model="item.state"
                        :label="1"
                      >是</el-radio>
                      <el-radio
                        v-model="item.state"
                        :label="2"
                      >否</el-radio>
                    </div>-->
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      v-if="item.type===2"
                      label-width="0"
                      :prop="'threeItem.'+index+'.name'"
                      :rules="{required: true, message:'请填写此项', trigger: 'blur'}"
                    >
                      <el-input
                        placeholder="文本框"
                        v-model="item.name"
                      ></el-input>
                    </el-form-item>
                    <div
                      v-if="item.type===3"
                      class="image-border-wrap"
                    >
                      <i class="el-icon-plus"></i>
                    </div>
                    <el-col v-if="item.type===1">
                      <el-row>
                        <el-form-item
                          label-width="0"
                          :prop="'threeItem.'+index+'.name'"
                          :rules="{required: true, message:'请填写此项', trigger: 'blur'}"
                        >
                          <el-input
                            placeholder="文本框"
                            v-model="item.name"
                          ></el-input>
                        </el-form-item>
                      </el-row>
                      <el-row :span="24">
                        <el-radio
                          v-model="item.content"
                          label="A"
                          disabled
                        >A</el-radio>
                        <el-radio
                          v-model="item.content"
                          label="B"
                        >B</el-radio>
                        <el-radio
                          v-model="item.content"
                          label="C"
                        >C</el-radio>
                        <el-radio
                          v-model="item.content"
                          label="D"
                        >D</el-radio>
                      </el-row>
                    </el-col>
                  </el-col>
                  <el-col :span="2">
                    <i
                      class="el-icon-delete"
                      @click="deleteCurrent(index)"
                      style="cursor:pointer;margin-left: 16px"
                      title="移除"
                    ></i>
                  </el-col>
                </el-row>
                <!-- <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="自查角色："
                      prop="selfRole"
                      :rules="{type:'array', required: true, message:'请选择角色', trigger: 'change'}"
                    >
                      <el-select
                        v-model="threeTableForm.selfRole"
                        multiple
                        onselect="true"
                      >
                        <el-option
                          v-for="item in selfRoleList"
                          :key="item.cUserId"
                          :label="item.cNickname"
                          :value="item.cUserId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="抽查角色："
                      prop="randomRole"
                      :rules="{type:'array', required: true, message:'请选择角色', trigger: 'change'}"
                    >
                      <el-select
                        v-model="threeTableForm.randomRole"
                        multiple
                        onselect="true"
                      >
                        <el-option
                          v-for="item in selfRandomList"
                          :key="item.cUserId"
                          :label="item.cNickname"
                          :value="item.cUserId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="检查角色："
                      prop="checkRole"
                      :rules="{required: true, message:'请选择角色', trigger: 'change'}"
                    >
                      <el-select
                        v-model="threeTableForm.checkRole"
                        onselect="true"
                      >
                        <el-option
                          v-for="item in checkRoleList"
                          :key="item.cUserId"
                          :label="item.cNickname"
                          :value="item.cUserId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>-->
              </el-form>
              <div
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button @click="closeThreeForm">取 消</el-button>
                <el-button
                  type="primary"
                  @click="setThreeTable('setTCForm')"
                >确定</el-button>
                <!-- <el-button v-else type="primary" @click="closeSetThreeForm">关闭</el-button> -->
              </div>
            </el-dialog>
            <el-dialog
              title="查看三查表"
              :visible.sync="dialogTCVisible"
            >
              <el-form
                id="nodisable"
                :model="threeContent"
                label-position="left"
                label-width="100px"
                style="margin: 0 auto"
                v-if="threeContent.threename"
              >
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label="三查表名称：">
                      <el-input
                        :value="threeContent.threename"
                        disabled
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label="自检日期：">
                      <el-date-picker
                        v-model="threeContent.starttime"
                        disabled
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label="三查表类型：">
                      <el-input
                        v-model="threeContent.tableTypeName"
                        disabled
                      ></el-input>
                      <!-- <el-select v-model="threeContent.tableTypeName">
                        <el-option
                          label="内部"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="外部"
                          :value="2"
                        ></el-option>
                      </el-select>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label="业务类型">
                      <el-input
                        v-model="threeContent.selftypeName"
                        disabled
                      ></el-input>
                      <!-- <el-select>
                        <el-option
                          v-for="item in serviceports"
                          :label="item.serviceport"
                          :value="item.id"
                          :key="item.id"
                        ></el-option>
                      </el-select>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label="检查部门：">
                      <el-select
                        v-model="threeContent.department"
                        multiple
                        disabled
                      >
                        <el-option
                          v-for="item in threeContent.departments"
                          :key="item.id"
                          :value="item.id"
                          :label="item.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label="自检周期：">
                      <el-input-number
                        :min="1"
                        v-model="threeContent.period"
                        placeholder="请输入自查周期"
                      />
                      <!-- {{threeContent.selfCheckPeriod}} -->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                >
                  <el-col :span="14">
                    <el-form-item label>
                      <el-col :span="6">
                        <el-button
                          type="primary"
                          @click="modifyThree({talbeid:threeContent.threeid,period:threeContent.period})"
                        >修改</el-button>
                      </el-col>
                      <el-col :span="6">
                        <el-button
                          type="danger"
                          @click="modifyThree({talbeid:threeContent.threeid,status:threeContent.status===1?2:1})"
                        >{{threeContent.status===1?'禁用':'启用'}}</el-button>
                      </el-col>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  type="flex"
                  justify="center"
                ></el-row>
                <el-row
                  v-for="(item,index) in threeContent.items"
                  :key="index"
                  class="newly-add"
                  type="flex"
                  justify="center"
                >
                  <el-col
                    :lg="14"
                    :md="24"
                  >
                    <el-form-item label=" ">
                      <!-- <el-col style="width: 100px ; height: 44px;">
                    <div v-if="item.type!==1">
                      <el-radio-group
                        disabled
                        v-model="item.state"
                      >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                      </el-radio-group>
                    </div>
                  </el-col> -->
                      <el-col :span="20">
                        <el-input
                          v-if="item.type===2"
                          placeholder="文本框"
                          v-model="item.name"
                          disabled
                        ></el-input>
                        <div
                          v-if="item.type===3"
                          class="image-border-wrap"
                        >
                          <i class="el-icon-plus"></i>
                        </div>
                        <el-col v-if="item.type===1">
                          <el-row>
                            <el-input
                              placeholder="文本框"
                              v-model="item.name"
                              disabled
                            ></el-input>
                          </el-row>
                          <el-row :span="24">
                            <el-radio-group
                              v-model="item.content"
                              disabled
                            >
                              <el-radio label="A">A</el-radio>
                              <el-radio label="B">B</el-radio>
                              <el-radio label="C">C</el-radio>
                              <el-radio label="D">D</el-radio>
                            </el-radio-group>
                          </el-row>
                        </el-col>
                      </el-col>
                      <!-- <el-col :span="2">
                    <i class="el-icon-delete" @click="deleteCurrent(index)" style="cursor:pointer;margin-left: 16px" title="移除"></i>
                  </el-col>-->
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-dialog>
            <!--详情-->
            <el-dialog :visible.sync="viewImage">
              <img
                :src="server+'/'+currentImage"
                alt
                width="100%"
              >
            </el-dialog>
            <el-dialog
              title="查看详情"
              :visible.sync="dialogabcVisible"
            >
              <table
                id="xq_table"
                border="1"
                style="width:100%"
                cellspacing="0"
                v-if="threeDetail.selfTask"
                :v-model="threeDetail"
              >
                <tr>
                  <th style="width:20%">所属部门</th>
                  <th style="width:30%">{{threeDetail.selfTask.departmentName}}</th>
                  <th style="width:20%">检查方式</th>
                  <th style="width:30%">{{threeDetail.selfTask.ambientName}}</th>
                </tr>
                <tr>
                  <th style="width:20%">自查人</th>
                  <th style="width:30%">{{threeDetail.selfTask.selfManName}}</th>
                  <th style="width:20%">自查时间</th>
                  <th style="width:30%">{{sliceDate(threeDetail.selfTask.selfTime)}}</th>
                </tr>
                <template v-for="(item,index) in threeDetail.items">
                  <tr :key="item.tabelId">
                    <th style="width:20%">{{item.name}}</th>
                    <td
                      v-if="item.type===2"
                      colspan="3"
                    >{{item.content}}</td>
                    <td
                      v-if="item.type===1"
                      colspan="3"
                    >
                      等级：{{item.content}}
                      <span style="margin-left: 30px; display: inline-block">结果：{{item.state===1?'是':'否'}}</span>
                    </td>
                    <td
                      v-if="item.type===3"
                      colspan="3"
                    >
                      <template v-if="item.content">
                        <img
                          @click="zoomImage(img)"
                          :src="server+'/'+img"
                          v-for="(img,index) in item.content.split(',')"
                          :key="index"
                          style="height: 150px; width: 150px;margin:0 10px"
                          alt
                        >
                      </template>
                      <div
                        v-else
                        style="opacity: 0.6;padding: 10px"
                      >(未添加图片)</div>
                    </td>
                  </tr>
                </template>
                <tr>
                  <th style="width:20%">检查人</th>
                  <th style="width:30%">{{threeDetail.selfTask.checkManName}}</th>
                  <th style="width:20%">检查时间</th>
                  <th style="width:30%">{{sliceDate(threeDetail.selfTask.checkTime)}}</th>
                </tr>
                <tr>
                  <th style="width:20%">检查情况</th>
                  <th colspan="3">{{threeDetail.selfTask.checkCondition}}</th>
                </tr>
                <tr>
                  <th style="width:20%">检查结果</th>
                  <th colspan="3">{{ resultLabel[threeDetail.selfTask.checkFruit]}}</th>
                </tr>
                <tr>
                  <th style="width:20%">备注</th>
                  <th colspan="3">{{threeDetail.selfTask.checkFremark||'无'}}</th>
                </tr>
                <tr>
                  <th style="width:20%">抽查人</th>
                  <th style="width:30%">{{threeDetail.selfTask.extractManName}}</th>
                  <th style="width:20%">抽查时间</th>
                  <th style="width:30%">{{sliceDate(threeDetail.selfTask.extractTime)}}</th>
                </tr>
                <tr>
                  <th style="width:20%">抽查情况</th>
                  <th colspan="3">{{threeDetail.selfTask.extractCondition}}</th>
                </tr>
                <tr>
                  <th style="width:20%">抽查结果</th>
                  <th colspan="3">{{resultLabel[threeDetail.selfTask.extractFruit]}}</th>
                </tr>
                <tr>
                  <th style="width:20%">备注</th>
                  <th colspan="3">{{threeDetail.selfTask.extractFremark||'无'}}</th>
                </tr>
              </table>
            </el-dialog>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-dialog
      :title="'三查表内容-'+tableStatus"
      :visible.sync="dialogContentVisible"
    >
      <el-main>
        <el-table
          :data="threeSelfDetail"
          border
          stripe
          style="text-align:center;"
          @cell-click="showThreeDetail"
          :header-cell-style="getRowClass"
          tooltip-effect="dark"
          id="out-table"
        >
          <el-table-column
            type="index"
            label="编号"
            width="90"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="threeName"
            label="三查表名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="selfManName"
            label="自查人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="selfTime"
            label="自查日期"
            :formatter="dateFormatter"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                class="edit-btn"
                @click="viewThreeDetail(scope.row.taskID)"
              >
                <i></i>查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleSelfCurrentChange"
            :current-page="selfCurrentPage"
            :page-sizes="[10]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next"
            :total="selfTotal"
            style="float:right"
          ></el-pagination>
        </div>
      </el-main>
    </el-dialog>
    <el-main>
      <section class="contant_head">
        <span>图表
          <!-- <sub>Form</sub> -->
        </span>
      </section>
      <el-table
        :data="allThreeData"
        border
        stripe
        style="text-align:center;"
        @cell-click="showThreeDetail"
        :header-cell-style="getRowClass"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        id="out-table"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
          align="center"
        > </el-table-column>-->
        <el-table-column
          label="编号"
          width="90"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="threeName"
          label="三查表名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="noFinish"
          label="未完成"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="finish"
          label="已完成"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="noVia"
          label="未通过"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="via"
          label="已通过"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="total"
          label="总数"
          align="center"
        ></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="edit-btn" @click="handleEdit(scope.$index, scope.row)" >
              <i></i>查看详情
            </el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,20]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next"
          :total="allTotal"
          style="float:right"
        ></el-pagination>
      </div>
    </el-main>
  </el-container>
  <!-- </div> -->
</template>

<script>
import { exportExcel, haveKeyObj } from "@/utils/validate";
import { api, exportData } from "@/fetch/api";
import server from "@/config.js";

export default {
  name: "processInfo",
  data() {
    return {
      server: server.apiServer,
      resultLabel: {
        1: "通过",
        2: "未通过"
      },
      addOptions: [
        {
          value: 2,
          label: "文本框"
        },
        {
          value: 1,
          label: "文本框+单选框"
        },
        {
          value: 3,
          label: "图片添加"
        }
      ],
      currentImage: "",
      newlyValue: "",
      tableStatus:'',
      newlyValueConfig: [],
      threeTableForm: {
        period: 0,
        starttime: "",
        // tableStatus: 0,
        threeItem: [],
        // threeTableId: 0,
        threename: "",
        department: [],
        tabletype: "",
        selftype: ""
      },
      myrole: {},
      tabelStatus: '',
      searchPart: {
        endDate: "",
        state: 0,
        selfMan: "",
        startDate: "",
        threeID: 0,
        threename: ""
      },
      options: [
        {
          value: 0,
          label: "全选"
        },
        {
          value: 1,
          label: "自查已完成"
        },
        {
          value: 2,
          label: "检查通过"
        },
        {
          value: 3,
          label: "抽查通过"
        },
        {
          value: 4,
          label: "检查,抽查不通过"
        }
      ],

      id: "",
      labelPosition: "right",
      searchs: {
        endDate: "",
        estate: 0,
        selfMan: "",
        startDate: "",
        threeTableId: 0,
        threeTableName: ""
      },
      search: {
        checkName: "",
        status: ""
      },
      states: {
        id: "",
        state: ""
      },
      permissions: [],
      department: [],
      threeCheckId: "",
      yibanions: [],
      putongions: [],
      selection: [],
      processInfo: {},
      role: {},
      content: {},
      startDate: "",
      endDate: "",
      title: "",
      allTotal: 0,
      subTotal: 0,
      tableData: [],
      allThreeData: [],
      threeDetail: {},
      threeContent: {},
      threeSelfDetail: [],
      selfTotal: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogabcVisible: false,
      keyprocessVisble: false,
      dialogTCVisible: false,
      dialogContentVisible: false,
      viewImage: false,
      currentPage: 1, //當前頁碼
      selfCurrentPage: 1,
      limit: 10,
      selfRoleList: [],
      selfRandomList: [],
      checkRoleList: [],
      downloadLoading: false,
      serviceports: []
    };
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.pageSize = val;
      this.getThreeTableGroup("", this.currentPage, this.limit);
      // this.getUser(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getThreeTableGroup("", this.currentPage, this.limit);
    },
    handleSelfCurrentChange(val) {
      this.selfCurrentPage = val;
      this.viewSelfDetail(this.searchPart, this.selfCurrentPage, 10);
    },
    // 设置三查表
    handleCreate() {
      (this.myrole = {}), (this.title = "设置三查表");
      Object.keys(this.checkContent).forEach(item => {
        this.checkContent[item] = [];
      });
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    // 三查表中多选框的选择
    getcomn(limit, pageIndex) {
      api.Threepagecontent().then(response => {
        if (response.status === 100) {
          this.permissions = response.result[0].list1;
          this.yibanions = response.result[0].list2;
          this.putongions = response.result[0].list3;
          api.LocalStorageService.update("permissions", response.result);
        } else {
          this.$message.error(response.message);
        }
      });
    },
    getDepattment() {
      api
        .Depattmentpage({}, { limit: 0, pageIndex: 0 })
        .then(response => {
          if (response.status === 100) {
            this.department = response.result.list;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // 导出
    exportTable() {
      const data = [];
      this.selection.forEach(item => {
        const temp = {};
        temp.name = item.threeTableName;
        temp.fulfil = item.finish;
        temp.noFulfil = item.noFinish;
        temp.tote = item.total;
        temp.noVia = item.noVia;
        data.push(temp);
      });
      api
        .exportData("/exportExcel/exportThreeExcel", data)
        .then(data => {
          const date = new Date(Date.now()).toLocaleDateString();
          exportExcel(data.data, "三查表表单" + date);
        })
        .catch(err => { });
    },
    gitButtonId(index) {
      return index;
    },
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    // 查看详情
    handleEdit(index, row) {
      this.processInfo = row;
      api.ThreecheckList({ threeCheckId: row.threeCheckId }).then(response => {
        this.content = response.result[0].content;
        for (let i = 0; i < this.content.length; i++) {
          this.content.selfChecked = this.content[i].selfChecked;
        }
        if (this.content.selfChecked === 1) {
          this.content.selfChecked = "是";
        } else {
          this.content.selfChecked = "否";
        }
      });
      this.editNum = index;
      this.dialogabcVisible = !this.dialogabcVisible;
      this.title = "三查表详情";
      this.$nextTick(() => {
        this.$refs["setTCForm"].clearValidate();
      });
    },
    closeSetThreeForm() {
      this.dialogTCVisible = false;
      this.newlyValueConfig = [];
    },
    parseDate(timestamp) {
      const date = new Date(timestamp).toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "long",
        day: "numeric"
      });
      return date;
    },
    // 改变表头颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:rgba(242,242,242,1)";
      } else {
        return "";
      }
    },
    // 查询
    handleNewlyChange(value) {
      console.log(value);
    },
    getSelfRoleList() {
      api.getRoleTypeList(3).then(response => {
        this.selfRoleList = response.result;
      });
    },
    getRandomRoleList() {
      api.getRoleTypeList(4).then(response => {
        this.selfRandomList = response.result;
      });
    },
    getCheckRoleList() {
      api.getRoleTypeList(5).then(response => {
        this.checkRoleList = response.result;
      });
    },
    zoomImage(img) {
      this.currentImage = img;
      this.viewImage = true;
    },
    addNewValue() {
      const item = {
        content: "",
        itemId: 0,
        name: "",
        state: 0,
        tableId: 0,
        type: this.newlyValue
      };
      if (this.newlyValue === 1) {
        item.content = "B";
      } else {
        item.state = 1;
      }
      this.newlyValueConfig.push(item);
      this.threeTableForm.threeItem.push(item);
    },
    closeThreeForm() {
      this.dialogFormVisible = false;
      this.newlyValueConfig = [];
      this.threeTableForm.threeItem = [];
    },
    deleteCurrent(index) {
      const temp = this.newlyValueConfig.filter((value, idx) => index !== idx);
      this.newlyValueConfig = [...temp];
      this.threeTableForm.threeItem = [...temp];
    },
    showThreeDetail(row, col, cell, event) {
      if (col.property === "threeName") {
        this.newlyValueConfig = [];
        this.viewThreeContent(row.threeID);
        this.dialogTCVisible = true;
      }
      // if (col.property === 'count1') {
      //   this.searchPart.threeTableId = row.threeTableId
      //   // this.searchPart.threeTableName = row.threeTableName
      //   this.searchPart.estate = 1
      //   this.viewSelfDetail(this.searchPart, 1, 10)
      //   this.dialogContentVisible = true
      // }
      if (col.property === "finish") {
        this.tableStatus = '已完成'
        this.searchPart.threeID = row.threeID;
        // this.searchPart.threeTableName = row.threeTableName
        this.searchPart.state = 2;
        this.viewSelfDetail(this.searchPart, 1, 10);
        this.dialogContentVisible = true;
      }
      if (col.property === "noVia") {
        this.tableStatus = '未通过'
        this.searchPart.threeID = row.threeID;
        // this.searchPart.threeTableName = row.threeTableName
        this.searchPart.state = 3;
        this.viewSelfDetail(this.searchPart, 1, 10);
        this.dialogContentVisible = true;
      }
      if (col.property === "via") {
        this.tableStatus = '已通过'
        this.searchPart.threeID = row.threeID;
        // this.searchPart.threeTableName = row.threeTableName
        this.searchPart.state = 4;
        this.viewSelfDetail(this.searchPart, 1, 10);
        this.dialogContentVisible = true;
      }
    },
    onTableTypeChange(val) {
      this.department = [];
      this.threeTableForm.department = [];
      if (val === 1) {
        this.getDopeDepart();
      } else {
        api.findDepartment(0, 0, { type: 3 }).then(res => {
          if (res.status === 100) {
            this.department = res.result.inspectorList;
          }
        });
      }
    },
    setThreeTable(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const values = { ...this.threeTableForm };
          values.items = [...values.threeItem];
          delete values.threeItem;
          values.department = values.department.join(",");
          // values.randomRole = values.randomRole.join(',')
          // values.selfRole = values.selfRole.join(',')
          api.addThreeTable(values).then(response => {
            if (response.status === 100) {
              this.$message("设置成功");
              this.getThreeTableGroup("", this.currentPage, this.limit);
              this.dialogFormVisible = false;
            }
          });
        } else {
          this.$message("请完善表单选项");
        }
      });
    },
    showThreeTable() {
      this.title = "设置三查表";
      this.findServiceports();
      // this.getDopeDepart()
      // this.getDepattment()
      this.dialogFormVisible = true;
      // this.getSelfRoleList()
      // this.getRandomRoleList()
      // this.getCheckRoleList()
      this.$nextTick(() => {
        this.$refs["setTCForm"].clearValidate();
        this.$refs["setTCForm"].resetFields();
        this.newlyValueConfig = [];
        this.threeTableForm.threeItem = [];
      });
    },
    clearNewlyConfig() {
      this.newlyValueConfig = [];
    },
    // 查询三查表整体
    getThreeTableGroup(param) {
      api
        .getThreeTableGroup(param, this.currentPage, this.limit)
        .then(response => {
          if (response.status === 100) {
            this.allThreeData = response.result.list;
            this.allTotal = response.result.totalCount;
          }
        });
    },
    //查询三查表详情
    viewThreeDetail(id) {
      api.selectThreeDetail(id).then(response => {
        this.threeDetail = response.result;
        this.dialogabcVisible = true;
      });
    },
    // 查询三查表内容
    viewThreeContent(id) {
      api.selectThreeContent(id).then(response => {
        this.threeContent = response.result;
        this.threeContent.department = this.threeContent.department
          .split(",")
          .map(item => parseInt(item, 10));
      });
    },
    // 检索三查表
    viewSelfDetail(params, pageIndex, limit) {
      const temp = { ...params };
      api.selectSelfDetail(temp, pageIndex, limit).then(response => {
        if (response.status === 100) {
          this.threeSelfDetail = response.result.list;
          this.selfTotal = response.result.totalCount;
        } else {
          this.threeSelfDetail = [];
        }
      });
    },
    // 三查表分组查询

    // 修改三查表
    modifyThree(params) {
      if (params.status) {
        this.$confirm("确认禁用?", "提示", {}).then(() => {
          api
            .modifyThree(params)
            .then(response => {
              if (response.status === 100) {
                this.$message("禁用成功");
                this.dialogTCVisible = false;
                this.getThreeTableGroup("", this.currentPage, this.limit);
              } else {
                this.$message("操作失败");
              }
            })
            .catch(() => { });
        });
      } else {
        api.modifyThree(params).then(response => {
          if (response.status === 100) {
            this.$message("修改成功");
            this.viewThreeContent(threeId).then(response => {
              if (response.status === 100) {
                this.threeContent = response.result;
              }
            });
          } else {
            this.$message("修改失败");
          }
        });
      }
    },
    // getRole(limit, pageIndex) {
    //   api
    //     .UserPage(this.searchs, { limit: limit, pageIndex: pageIndex })
    //     .then(response => {
    //       if (response.status === 100) {
    //         this.role = response.result.list;
    //       } else {
    //         this.$message.error(response.message);
    //       }
    //     });
    // },
    findServiceports() {
      api.findDepartment(0, 0, { type: 2 }).then(res => {
        this.serviceports = res.result.inspectorList;
      });
    },
    sliceDate(date) {
      return date ? date.slice(0, -5) : "";
    },
    dateFormatter(row, col, value, index) {
      return this.sliceDate(value);
    },
    getDopeDepart() {
      api.getDopeDeparts().then(res => {
        if (res.status === 100) {
          this.department = res.result;
        }
      });
    }
  },
  mounted() {
    // this.getRole(20, this.currentPage);
    this.getThreeTableGroup("", this.currentPage, this.limit);
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #333;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.pictitle {
  height: 178px;
  line-height: 178px;
}
.left-4 {
  margin-left: 10.5%;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.list-left {
  margin-left: 2.9%;
  margin-top: 20px;
}
// .app-container {
//   background: #f2f2f2;
//   .el-header {
//     background: #fff;
//     padding-top: 15px;
//     margin: 0 auto;
//     margin-bottom: 20px;
//   }
//   .el-main {
//     background: #fff;
//     margin: 0 auto;
//     padding: 0px;
//     .contant_head {
//       border-left: 3px solid #f7585d;
//       background: #f9f9f9;
//       height: 40px;
//       span {
//         line-height: 40px;
//         font-size: 20px;
//         padding-left: 10px;
//         sub {
//           font-size: 12px;
//         }
//       }
//     }
//   }
// }

.newly-add {
  min-height: 53px;
  line-height: 53px;
}
</style>
<style>
.el-upload {
  border: 1px solid #333;
  border-radius: 5px;
  margin-bottom: 20px;
}

#nodisable .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

#nodisable .el-radio__label {
  color: #606266;
}
</style>

<style lang="stylus" module="$">
.role_setting_panel {
  background: #f2f2f2;

  :global {
    .el-form--inline .el-form-item {
      margin-right: 0;
    }
  }
}
</style>
<style>
#xq_table {
  color: #000;
}
#xq_table th {
  padding: 0.15625rem;
  font-family: "Microsoft YaHei" !important;
}

#xq_table td,
#xq_table th {
  font-size: 16px;
  padding: 10px;
}

#xq_table {
  border-color: #f7f7f7;
  font-size: 0.21875rem;
}
#xq_table tr th:first-child {
  background-color: #f2f2f2;
}
#xq_table tr th:first-child + th + th {
  background-color: #f2f2f2;
}

#xq_table td {
  text-align: center;
}

.image-border-wrap {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border: 1px dashed #d9d9d9;
  text-align: center;
  justify-content: center;
  align-items: center;
}
</style>

<style lang="less" scoped>
@import url("../../assets/css/index.css");
.el-header {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  .el-input,
  .el-select,
  .el-date-picker {
    width: 100%;
  }
}
.el-main {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  padding: 0px;
  .contant_head {
    border-left: 3px solid #f7585d;
    background: #f9f9f9;
    height: 40px;
    span {
      line-height: 40px;
      font-size: 20px;
      padding-left: 10px;
      sub {
        font-size: 12px;
      }
    }
  }
}
</style>